<template>
	<view class="page">
		<view class="statusshow">
			<view class="green">
				<view class="left">
					
				</view>
				<view class="right">
					
				</view>
			</view>
			<view class="paytext">
				已缴费
			</view>
		</view>
		<!-- 其他信息 -->
		<view class="otherInfo">
			<!-- 取药码 -->
			<view class="paycode">
				<image style="width: 600rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%BC%B4%E8%B4%B9%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u1321.png" mode="widthFix"></image>
				<view class="registrationcard">
					20200101001598Z
				</view>
				<view class="note">
					取药或检查时请出示此码
				</view>
			</view>
			<!-- 缴费信息 -->
			<view class="paymentInfo">
				<view class="title">
					缴费信息
				</view>
				<view class="payInfolists">
					<view class="payInfolist">
						<view class="payname">
							就诊人
						</view>
						<view class="paycontent">
							王小柯
						</view>
					</view>
					<view class="payInfolist">
						<view class="payname">
							登记号
						</view>
						<view class="paycontent">
							20200101001598Z
						</view>
					</view>
					<view class="payInfolist">
						<view class="payname">
							就诊科室
						</view>
						<view class="paycontent">
							门诊外一科
						</view>
					</view>
					<view class="payInfolist">
						<view class="payname">
							开单医生
						</view>
						<view class="paycontent">
							刘医师
						</view>
					</view>
					<view class="payInfolist">
						<view class="payname">
							开单时间
						</view>
						<view class="paycontent">
							2020-01-01 10:20:36
						</view>
					</view>
				</view>
			</view>
			<!-- 费用明细 -->
			<view class="CostDetails">
				<view class="title">
					费用明细
				</view>
				<view class="costkinds">
					<view class="please">
						请前往一楼门诊药房2号窗口取药
					</view>
					<view class="kindstitle">
						<view class="kindslogo">
							药
						</view>
						<view class="kindstext">
							处方号（20200101032）
						</view>
					</view>
					<view class="prescriptionlists">
						<view class="prescriptionlist" v-for="n in 5" :key="n">
							<view class="prescriptionname">
								1、葆宫止血颗粒*3盒
							</view>
							<view class="prescriptionprice">
								￥50.13
							</view>
						</view>
					</view>
				</view>
				<view class="costkinds">
					<view class="please" style="background-color: rgba(255, 251, 230, 1);color: #FAAD14;">
						请前往门诊三楼放射科进行检查
					</view>
					<view class="kindstitle">
						<view class="kindslogo" style="background-color: rgba(255, 251, 230, 1);color: #FAAD14;">
							查
						</view>
						<view class="kindstext">
							检查单号（20200101133）
						</view>
					</view>
					<view class="prescriptionlists">
						<view class="prescriptionlist" v-for="n in 2" :key="n">
							<view class="prescriptionname">
								1、CT
							</view>
							<view class="prescriptionprice">
								￥200.00
							</view>
						</view>
					</view>
				</view>
				<!-- 合计 -->
				<view class="subtotal">
					合计：￥520.13
				</view>
			</view>
			<!-- 订单信息 -->
			<view class="orderInfo">
				<view class="title">
					订单信息
				</view>
				<view class="infolists">
					<view class="infolist copy">
						<view class="copytext">
							订单号：2021010156256894
						</view>
						<view class="copycolor">
							复制	
						</view>
					</view>
					<view class="infolist">
						订单流水号：400012021010156256894
					</view>
					<view class="infolist">
						订单金额：￥520.13
					</view>
					<view class="infolist">
						订单状态：已支付
					</view>
					<view class="infolist">
						支付方式：微信支付
					</view>
					<view class="infolist">
						下单时间：2020-01-01 10:23:36
					</view>
					<view class="infolist">
						支付时间：2020-01-01 10:25:10
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		.statusshow{
			width: 100%;
			height: 130rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			.green{
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				background-color: rgba(54, 207, 201, 1);
				position: relative;
				margin-left: 50rpx;
				.left{
					width: 4rpx;
					height: 14rpx;
					background-color: #fff;
					transform: rotate(135deg);
					border-radius: 40rpx;
					position: absolute;
					left: 24rpx;
					top: 32rpx;
				}
				.right{
					width: 4rpx;
					height: 28rpx;
					background-color: #fff;
					border-radius: 40rpx;
					transform: rotate(45deg);
					position: absolute;
					left: 36rpx;
					top: 20rpx;
				}
			}
			.paytext{
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 36rpx;
				font-weight: 700;
				color: #000;
				margin-left: 30rpx;
			}
		}
		.otherInfo{
			padding: 26rpx 26rpx 80rpx;
			box-sizing: border-box;
			.paycode{
				width: 100%;
				height: 336rpx;
				background-color: #fff;
				border-radius: 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 30rpx;
				box-sizing: border-box;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				.registrationcard{
					font-weight: 700;
					margin-top: 18rpx;
				}
				.note{
					font-size: 26rpx;
					margin-top: 22rpx;
					color: #7f7f7f;
				}
			}
			// 缴费信息
			.paymentInfo{
				width: 100%;
				height: 394rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 32rpx 44rpx;
				margin-top: 30rpx;
				box-sizing: border-box;
				.title{
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-weight: 700;
					font-size: 28rpx;
					margin-bottom: 26rpx;
				}
				.payInfolists{
					.payInfolist{
						height: 40rpx;
						display: flex;
						align-items: center;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						margin-bottom: 16rpx;
						.payname{
							color: #7f7f7f;
							width: 114rpx;
							margin-right: 62rpx;
						}
					}
				}
			}
			// 费用明细
			.CostDetails{
				width: 100%;
				height: 976rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				padding: 32rpx 44rpx;
				box-sizing: border-box;
				.title{
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-weight: 700;
					font-size: 28rpx;
					// margin-bottom: 26rpx;
				}
				.costkinds{
					padding-top: 40rpx;
					padding-bottom: 24rpx;
					border-bottom: 2rpx solid rgba(242, 242, 242, 1);
					.please{
						width: 620rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background-color: rgba(230, 244, 255, 1);
						color: #1677FF;
						border-radius: 4rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 24rpx;
					}
					.kindstitle{
						display: flex;
						align-items: center;
						height: 42rpx;
						margin-top: 18rpx;
						.kindslogo{
							width: 46rpx;
							height: 42rpx;
							line-height: 42rpx;
							text-align: center;
							background-color: rgba(230, 244, 255, 1);
							color: #1677FF;
							border-radius: 4rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 24rpx;
						}
						.kindstext{
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							margin-left: 18rpx;
						}
					}
					.prescriptionlists{
						margin-top: 24rpx;
						.prescriptionlist{
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 40rpx;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-size: 28rpx;
							color: #7F7F7F;
							margin-bottom: 16rpx;
						}
					}
				}
				.subtotal{
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-size: 32rpx;
					font-weight: 700;
					text-align: right;
					margin-top: 40rpx;
				}
			}
			// 订单信息
			.orderInfo{
				width: 100%;
				height: 528rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 30rpx;
				padding: 32rpx 44rpx;
				box-sizing: border-box;
				.title{
					font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
					font-weight: 700;
					font-size: 28rpx;
					margin-bottom: 26rpx;
				}
				.infolists{
					.infolist{
						height: 40rpx;
						line-height: 40rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 16rpx;
					}
					.copy{
						height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.copycolor{
							color: #1677FF;
							cursor: pointer;
						}
					}
				}
			}
		}
	}       
</style>
